<template>
  <PublicPage class="to-audit" page-name="帮卖审核" :borderType="true" :showNav="true">
    <view class="to_audit_msg_box">
      <!-- 搜索 -->
      <view class="page_operate_box">
        <view class="search_box"><SearchInput placeholder="搜索帮卖昵称" @searchFn="searchOrderInputFn" /></view>
        <view class="to_examine_box" @click.stop="goToAuditSettingsFn" hover-class="hover">审核设置<i class="iconfont icon-set"></i></view>
      </view>
      <!-- 筛选条件 -->
      <view>
        <view class="justify-between audit-all">
          <view
            style="width: 100%; display: flex; justify-content: space-around"
          >
            <view
              class="my-audit-all"
              v-for="(all, index) in auditList"
              :key="index"
              @click="screeningClick(index)"
            >
              <view :class="{ active_all: activeAll === index }">{{
                all.cat_name
              }}</view>
              <view class="arrow-up-down">
                <!-- <view :class="{ active_icon: iconIndex === index }">
                <u-icon :name="icon.name" size="16"></u-icon>
              </view> -->
                <u-icon
                  v-for="(icon, ind) in all.list"
                  :key="ind"
                  :name="icon.name"
                  size="16"
                  :class="{
                    active_icon: activeAll === index && iconIndex === ind,
                  }"
                ></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
      <scroll-view v-if="waitExamineList.length>0" class="myHelpSell" @scrolltolower="scrolltolowerFn" :scroll-anchoring="true" :scroll-y="true">
        <ul class="helpSellList_ul_box">
          <li class="helpSellList_li_box" v-for="(item,index) in waitExamineList" :key="index">
            <div class="msg_box_left">
              <img class="img_box" :src="item.avatar || 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'" alt="">
            </div>
            <view class="msg_box_right">
              <view class="name_box">
                <view class="name_box_l"><span>{{item.nickname}}</span><em v-if="item.isCancel==1">取消过帮卖关系</em></view>
                <view class="name_box_r">
                  <button class="btn_box btn_box1" hover-class="hover" @click.stop="toExamineFn(item,index,3)">拒绝</button>
                  <button class="btn_box btn_box2" hover-class="hover" @click.stop="toExamineFn(item,index,2)">通过申请</button>
                </view>
              </view>
              <view class="invitation_name_box" v-if="item.recommendName">邀请人：{{item.recommendName}}</view>
              <view class="census_data_box">
                <span>成员数<i>{{playvolumeFn(item.fansCount) || 0}}</i></span>
                <span>开团次数<i>{{playvolumeFn(item.dynamicCount) || 0}}</i></span>
                <span>跟团人次<i>{{playvolumeFn(item.followGroupCount) || 0}}</i></span>
              </view>
              <view class="remarks_box">备注：{{item.applyRemark || '空'}}</view>
            </view>
          </li>
        </ul>
        <div class="no_more" v-if="totalType">没有更多了~</div>
      </scroll-view>
      <div class="myHelpSell" v-if="noDataPageType">
        <view class="flex-col items-center order-default">
          <image
            src="https://image.qqpyyds.com/mpAppImg/noneImg/default_img.png"
            class="order-default-image"
            mode="aspectFill"
          />
          <text class="order-default-text" v-if="userInfo.isHelpSellExamine==1">当前已开启自动审核， </text>
          <text class="order-default-text" v-if="userInfo.isHelpSellExamine==1">所有帮卖申请都已帮您自动通过。</text>
          <text class="order-default-text" v-if="userInfo.isHelpSellExamine==0">暂时没有待审核的申请哦～</text>
        </view>
      </div>
    </view>
    <!-- <u-modal v-model="showWechatNumberType" :showCancelButton="true" cancelColor="#969799" @confirm="wechatNumberConfirm" confirmColor="#E44435" title="设置备注名" >
			<view class="slot-content">
				<div class="input_msg">
          <input class="input_box" v-model.trim="remarkName" placeholder-class="place_holder" maxlength="50" placeholder="请输入备注，最多50个字符。">
        </div>
			</view>
		</u-modal> -->
  </PublicPage>
</template>
<script>
import PublicPage from "@/components/publicPage/index.vue";
import helpSellGroups from "@/api/helpSellGroups.js"
import Util from "@/api/util.js";
import SearchInput from "@/components/searchInput/index.vue";
export default {
  components: { PublicPage, SearchInput },
  name: "toAudit",
  data() {
    return {
      auditList: [
        {
          cat_name: "团成员数",
          list: [{ name: "arrow-up-fill" }, { name: "arrow-down-fill" }],
        },
        {
          cat_name: "开团次数",
          list: [{ name: "arrow-up-fill" }, { name: "arrow-down-fill" }],
        },
        {
          cat_name: "跟团人次",
          list: [{ name: "arrow-up-fill" }, { name: "arrow-down-fill" }],
        },
      ],
      activeAll: 0,
      iconIndex: 1,
      currentData: {
        currentPage: 1,
        pageSize: 10,
      },
      waitExamineList: [],
      totalType: false,
      headNickname: '',
      showWechatNumberType: false,
      remarkParams: {},
      remarkName: '',
      noDataPageType: false,
    }
  },
  onShow () {
    this.getWaitExamineListFn()
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    },
  },
  methods: {
    goToAuditSettingsFn () {
      this.navigateTo({ url: '/pagesA/helpSellGroups/auditSettings'})
    },
    toExamineFn (data,index,type) {
      this.remarkParams = {}
      this.remarkParams = {
        ...data,
        index: index
      }
      let confirmTextStr = type==3?'拒绝':'通过'
      let contentStr = ''
      if (type==3) {
        contentStr = '确定拒绝吗？'
      }
      if (type==2) {
        contentStr = '确定通过吗？'
      }
      let this_ = this
      wx.showModal({
        title: '',
        cancelText: '取消',
        confirmText: confirmTextStr,
        confirmColor: '#E34D59',
        content: contentStr,
        success (res) {
          if (res.confirm) {
            helpSellGroups.examine({
              userHeadId: this_.remarkParams.userHeadId,
              examineStatus: type
            }).then((res)=>{
              if (res.code ==200) {
                this_.waitExamineList.splice(this_.remarkParams.index,1)
                if (this_.waitExamineList.length<=0) {
                  this_.currentData.currentPage = 1
                  this_.totalType = false
                  this_.getWaitExamineListFn()
                }
                this_.setIsRefreshType(true)
              }
            })
          }
        }
      })
    },
    remarkFn (data,index) {
      this.remarkParams = {}
      this.remarkParams = {
        ...data,
        index: index
      }
      this.remarkName = this.remarkParams.applyRemark
      this.showWechatNumberType = true
    },
    wechatNumberConfirm () {
      this.showWechatNumberType = true
      if (!this.remarkName) {
        return wx.showToast({
          title: '请输入备注!',
          icon: 'none',
          duration: 1000
        })
      }
      helpSellGroups.updateHeadRemark({
        headAccountId:  this.remarkParams.headAccountId,
        headRemark: this.remarkName
      }).then((res)=>{
        if (res.code ==200) {
          this.showWechatNumberType = false
        }
      })
    },
    searchOrderInputFn (e) {
      this.headNickname = e
      this.waitExamineList = []
      this.currentData.currentPage = 1
      this.totalType = false
      this.getWaitExamineListFn()
    },
    scrolltolowerFn () {
      if (this.totalType) return
      ++this.currentData.currentPage
      this.getWaitExamineListFn()
    },
    async getWaitExamineListFn () {
      let params = {}
      params = {
        ...params,
        ...this.currentData,
        sortType: this.iconIndex+1,
        sortField: this.activeAll+1,
      }
      if (this.headNickname) {
        params = {
          ...params,
          nickname: this.headNickname
        }
      }
      helpSellGroups.getWaitExamineList(params).then((res)=>{
        if (res.code==200) {
          if (res.data.records.length>0) {
            let arr = res.data.records
            if (this.waitExamineList.length>0) {
              this.waitExamineList = this.waitExamineList.concat(arr)
            } else {
              this.waitExamineList = arr
            }
          }
          if (res.data.records.length<this.currentData.pageSize) {
            this.totalType = true
          }
          this.noDataPageType = this.waitExamineList.length>0?false:true
        } else {
          this.noDataPageType = true
        }
      })
    },
    playvolumeFn (mun) {
      return Util.playvolume(mun)
    },
    screeningClick(index) {
      if (this.activeAll == index) this.iconIndex = this.iconIndex==0?1:0
      this.activeAll = index;
      this.waitExamineList = []
      this.currentData.currentPage = 1
      this.totalType = false
      this.getWaitExamineListFn()
    },
    screeningIcon(ind) {
      console.log(ind, "---------上下icon");
      this.iconIndex = ind;
    },
  },
};
</script>
<style lang="scss" scoped>
.to-audit {
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
}
.to_audit_msg_box {
  width: 100vw;
  height: 100%;
  overflow: hidden;
  .page_operate_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    background-color: #fff;
    box-shadow: inset 0px -2rpx 0px #EBEDF0;
    .search_box {
      width: 542rpx;
    }
    .to_examine_box {
      width: 224rpx;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      line-height: 40rpx;
      color: rgba(0, 0, 0, 0.9);
      .icon-set {
        margin-left: 10rpx;
      }
    }
  }
}
.myHelpSell {
  width: 100vw;
  height: calc(100% - 202rpx);
}
.helpSellList_ul_box {
  background-color: #fff;
  .helpSellList_li_box {
    display: flex;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 2rpx solid #f2f3f5;
    .msg_box_left {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      .img_box {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
    }
    .msg_box_right {
      width: 582rpx;
      .name_box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 28rpx;
        .name_box_l {
          display: flex;
          align-items: center;
          span {
            display: block;
            max-width: 168rpx;
            height: 48rpx;
            line-height: 48rpx;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            font-size: 28rpx;
            margin-right: 14rpx;
          }
          em {
            font-size: 24rpx;
            color: #C8C9CC;
          }
        }
        .name_box_r {
          display: flex;
          align-items: center;
          .btn_box {
            height: 48rpx;
            padding: 0 16rpx;
            margin: 0;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 32rpx;
            &.btn_box1 {
              font-size: 24rpx;
              color: #323233;
              margin-right: 20rpx;
              border: 2rpx solid #eee;
            }
            &.btn_box2 {
              font-size: 24rpx;
              color: #FFF;
              background: #E44435;
            }
          }
        }
      }
      .invitation_name_box {
        font-size: 24rpx;
        line-height: 32rpx;
        color: #FB9551;
      }
      .census_data_box {
        display: flex;
        align-items: center;
        margin-top: 16rpx;
        span {
          font-size: 24rpx;
          color: #969799;
          margin-right: 24rpx;
          display: flex;
          align-items: center;
          i {
            color: #323233;
            margin-left: 10rpx;
          }
        }
      }
      .remarks_box {
        margin: 16rpx 0 0 0;
        font-size: 24rpx;
        color: #969799;
      }
    }
  }
}
// 搜索框
.main3 {
  z-index: 193;
  height: 112rpx;
  background-color: rgba(255, 255, 255, 1);
  border: 2rpx solid #eee;
  width: 750rpx;
  justify-content: center;
  align-items: flex-start;
  padding-left: 24rpx;
  display: flex;
  flex-direction: column;
}
.group1 {
  z-index: auto;
  width: 694rpx;
  height: 80rpx;
  flex-direction: row;
  display: flex;
  align-items: center;
  .library-goods {
    display: flex;
    height: 100%;
    align-items: center;
    margin-left: 24rpx;
    .word1 {
      font-size: 32rpx;
    }
    .label2 {
      width: 40rpx;
      height: 40rpx;
      margin-left: 4rpx;
    }
  }
  .goods-search-bg {
    background: #f5f5f5;
    display: flex;
    width: 100%;
    height: 80rpx;
    border-radius: 8rpx;
    align-items: center;
    .goods-search-icon {
      background: url("https://image.qqpyyds.com/mpAppImg/icon/search1_icon.png")
        0rpx 0rpx no-repeat;
      width: 48rpx;
      height: 48rpx;
      margin: 0 20rpx;
    }
    .goods-search-input {
      width: 90%;
    }
  }
  .goods-search-text {
    width: 120rpx;
    font-size: 32rpx;
    color: #e44435;
    text-align: center;
  }
}
.group2 {
  z-index: 195;
  height: 80rpx;
  border-radius: 8rpx;
  background-color: rgba(245, 245, 245, 1);
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.layer1 {
  z-index: auto;
  width: 170rpx;
  height: 40rpx;
  flex-direction: row;
  display: flex;
  justify-content: center;
}
.mod3 {
  z-index: 198;
  display: flex;
  flex-direction: column;
  margin-right: 4rpx;
}
.txt3 {
  z-index: 197;
  //   width: 128rpx;
  width: fit-content;
  display: block;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 0.16);
  font-size: 32rpx;
  font-family: PingFangSC-Regular;
  white-space: nowrap;
  line-height: 40rpx;
  text-align: center;
}

// 筛选条件
.audit-all {
  padding: 20rpx 32rpx;
  background: #fff;
  border-bottom: 2rpx solid #f2f3f5;
  .my-audit-all {
    height: 60rpx;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.9);
    margin-right: 16rpx;
    .arrow-up-down {
      margin-left: 10rpx;
      display: flex;
      flex-direction: column;
      color: #969799;
      .active_icon {
        color: #e44435;
      }
    }
  }
  .active_all {
    color: #e44435;
    // background: #ffe5de;
  }
}

// 列表
.audit-list-item {
  margin-bottom: 8rpx;
}
.audit-top-section {
  padding: 20rpx 20rpx 14rpx;
  background-color: rgb(255, 255, 255);
  box-shadow: inset 0rpx -2rpx 0rpx 0rpx rgb(238, 238, 238);
  position: relative;
}
.audit-bottom-section {
  padding: 16rpx 32rpx;
  background-color: rgb(255, 255, 255);
  box-shadow: inset 0rpx -2rpx 0rpx 0rpx rgb(238, 238, 238);
}
.audit-image_13 {
  margin-bottom: 6rpx;
  border-radius: 4rpx;
  width: 100rpx;
  height: 100rpx;
}
.audit-right-group {
  margin-left: 16rpx;
  flex: 1 1 auto;
}
.audit-left-text-wrapper {
  margin-right: 20rpx;
  padding: 6rpx 0 4rpx;
  color: rgb(0, 0, 0);
  font-size: 24rpx;
  line-height: 34rpx;
  white-space: nowrap;
  border-radius: 4rpx;
  width: 120rpx;
  height: 48rpx;
  border: solid 2rpx rgb(220, 222, 224);
}
.audit-right-text-wrapper_1 {
  padding: 8rpx 0 6rpx;
  color: rgb(255, 255, 255);
  font-size: 24rpx;
  line-height: 34rpx;
  white-space: nowrap;
  background-color: rgb(228, 68, 53);
  border-radius: 8rpx;
  width: 120rpx;
  height: 48rpx;
}
.audit-center-group {
  color: rgb(0, 0, 0);
  font-size: 24rpx;
  line-height: 34rpx;
  white-space: nowrap;
}
.audit-text_20 {
  color: rgb(0, 0, 0);
  font-size: 24rpx;
  line-height: 34rpx;
  white-space: nowrap;
}
.audit-text_8 {
  color: rgb(0, 0, 0);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
}
.audit-right-text-wrapper {
  margin: 6rpx 0 6rpx 7rpx;
  //   padding: 4rpx;
  color: rgba(0, 0, 0, 0.6);
  font-size: 20rpx;
  line-height: 26rpx;
  white-space: nowrap;
  border-radius: 4rpx;
  height: 28rpx;
  border: solid 1rpx rgb(150, 151, 153);
}
.audit-text_14 {
  margin-left: 16rpx;
}
.audit-text_17 {
  margin-left: 16rpx;
}
.audit-text_10 {
  margin: 0 4rpx;
}

// 没有更多
.no-more {
  text-align: center;
  margin-top: 28rpx;
}
.order-main3 {
  z-index: 193;
  height: 112rpx;
  background-color: rgba(255, 255, 255, 1);
  border: 2rpx solid #eee;
  width: 750rpx;
  justify-content: center;
  align-items: flex-start;
  padding-left: 24rpx;
  display: flex;
  flex-direction: column;
}
.order-group1 {
  z-index: auto;
  width: 694rpx;
  height: 80rpx;
  flex-direction: row;
  display: flex;
  align-items: center;
  .order-search-bg {
    background: #f5f5f5;
    display: flex;
    width: 100%;
    height: 80rpx;
    border-radius: 8rpx;
    align-items: center;
    .order-search-icon {
      background: url("https://image.qqpyyds.com/mpAppImg/icon/search1_icon.png") 0rpx 0rpx no-repeat;
      width: 48rpx;
      height: 48rpx;
      margin: 0 20rpx;
    }
    .order-search-input {
      width: 90%;
    }
  }
  .order-search-text {
    width: 120rpx;
    font-size: 32rpx;
    color: #e44435;
    text-align: center;
  }
}
</style>
